<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>身高体重计算衣服尺寸</title>
<jsp:include page="../public/header.jsp"/>
</head>
<body>
	<jsp:include page="../public/nav.jsp"/>
	<div class="row">
		<div class="col-xs-10 col-xs-offset-1">
			<h2>功能说明</h2>
			<p class="lead">该工具是根据衣服的类型,身高和体重，和根据市面上的对照表，组装写的一个计算可能合适自己衣服尺寸大小工具</p>
			<p ><mark>来源:</mark><br>每次在淘宝上选衣服的时候，都不知道该选什么的型号，每次都希望有一个人能够告诉我！</p>
			<p class="lead">使用说明</p>
			<p class="text-info text-lowercase ">
				1.输入，身高，体重，选择性别，和对应服装 <br>
				2.提交 <br>
				完成后会在结果区显示你要的结果，根据不同服装的类型有不同的服装样式与对应的型号。
			</p>
		</div>
	</div>
	 <div class="row">
		
		<div class="col-xs-10 col-xs-offset-1">
		<h2>工具区</h2>
	  <div class="form-group">
	    <label for="height">身高：(单位厘米)</label>
	    <input type="text" class="form-control" id="height" placeholder="请输入你的身高" value="172">
	  </div>
	  <div class="form-group">
	    <label for="weight">体重(单位/近)</label>
	    <input type="text" class="form-control" id="weight" placeholder="请输入你的体重" value="120">
	  </div>
	  <div class="form-group">
	   <label >类别</label>
	  	<label class="radio-inline">
		  <input type="radio" id="type0" name="people" value="0" checked> 成年男
		</label>
		<label class="radio-inline">
		  <input type="radio" id="type1" name="people" value="1"> 成年女
		</label>
		<label class="radio-inline">
		  <input type="radio" id="type2" name="people" value="2"> 小孩
		</label>
		<label class="radio-inline">
		  <input type="radio" id="type3" name="people" value="3"> 文胸
		</label>
	  </div>
	   <div class="form-group"> 
	    <label for="type">款式</label>
	   <select multiple class="form-control" id="type" name="type">
		   <option value="0" selected>上衣</option>
		  <option value="1">衬衫</option>
		  <option value="2">裤子</option>
		  <option value="3">连衣裙</option>
		  <option value="4">西装</option>
		  <option value="5">婴儿(0~2岁)</option>
		  <option value="6">小孩(2~10岁)</option>
		  <option value="7">青少年(10~16岁)</option>
		  <option value='8'>童装</option>
		</select>
	   </div>
	  <button id="submit" type="submit" class="btn btn-default">确定</button>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-10 col-xs-offset-1">
		<h2>结果区</h2>
			<p id="msg"></p>
		</div>
	</div>
	<jsp:include page="../public/footer.jsp"/>
</body>
	<script type="text/javascript">
		$("#submit").click(function(){
			var height = $("#height").val();
			var weight = $("#weight").val();
			var people = $("input[name='people']:checked").val();
			console.log(people);
			var type = $("#type option:selected").val();
			var params = {height:height,weight:weight,people:people,type:type};
			console.log(params);
			
			$.ajax({url:"/clothes/getSize.html",data:params,type:'post',success:function(data){
				data = eval('(' + data + ')');
				console.log(data);
				if(data.code == 0){
					$("#msg").html("与你匹配的型号为:<span class='lead'>"+data.msg+"</span>,本工具主要是借鉴作用，身高与体重与尺寸并没有绝对关系！");
				}else{
					$("#msg").html(data.msg + "<p class='lead'>如未找到你的型号，请在下面反馈区进行反馈。我们会努力采集相关的数据，努力做到更好。如果有什么好的建议，也欢迎反馈。感激不尽！</p>");
				}
			}});
			
		})
	</script>
</html>